<template>
  <div class="live_box">
    <div class="live" v-if="PhotoData.length !== 0"  >
      <div class="live_item"
           v-for="(item,i) in PhotoData"
           :key = i
      >
        <img :src="$baseImg + item.img" alt="">
      </div>

    </div>
    <el-empty v-else description="暂无数据"></el-empty>

  </div>

</template>

<script>
export default {
  data(){
    return{
      PhotoData:[]
    }
  },
  methods:{

    getPhoto() {
      // 获取用户信息
      this.$axios.getPhoto({take:9999}).then(res => {
        console.log(res.data)
        this.PhotoData = res.data
      })
    }

  },
  mounted() {
    this.changeStyle(4)
    this.getPhoto()
  }
}

</script>

<style scoped lang="less">
.live_box{
  width: 100%;
  height: 100%;
  /deep/ .el-empty{
    height: 100%;
  }
}

.live{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:  1vw;

  .live_item{
    border-radius: 0.7648vw;
    aspect-ratio: 5 / 3;
    background: rgb(51, 51, 51);
    overflow: hidden;

    img{
      display: block;
      width: 100%;
    }
  }
}

/deep/ .el-empty{
  padding: 1.3333vw 0;
  .el-empty__image{
    width: 10vw;
  }
  .el-empty__description {
    margin-top: 1vw;
  }
  .el-empty__description p {
    margin: 0;
    font-size: 1.7333vw;
    color: #909399;
  }
}
</style>